<template>
    <div class="active-panel" v-show="visible">
        <i class="el-icon-close" @click="handleClose"></i>
        <div slot="footer" class="dialog-footer">
            <slot></slot>
        </div>
        <div class="header">
            <img :src="avatar"/>
        </div>
    </div>
</template>
<script>
    import eventBus from "@/utils/eventBus";
    import store from "@/store";
    export default {
        name: "ActivePanel",
        props:["visible"],
        data() {
            return {};
        },
        computed:{
          avatar(){
              return store.getters.avatar?store.getters.avatar:require("@/assets/images/logo.png")
          }
        },
        methods: {
            handleClose(done) {
                this.$emit("update:visible", false)
                eventBus.$emit("hideSuggestionDialog", false)
            },
        }
    };
</script>
<style lang="scss" scoped>
    .active-panel{
        position: absolute;
        right: 1px;
        width: 399px;
        bottom: 1px;
        i{
            position: absolute;
            right: 5px;
            top: 5px;
        }
        .header {
            position: absolute;
            background-color: #ffffff;
            width: 75px;
            height: 75px;
            border-radius: 50%;
            padding: 8px 8px;
            top: -30px;
            left: 15px;
            box-shadow:0px -3px 10px -3px #9e9e9e;
            img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
            }
        }
        /*img {*/
        /*    position: absolute;*/
        /*    width: 60px;*/
        /*    height: 60px;*/
        /*    top: 0px;*/
        /*}*/
        .dialog-footer{
            padding: 40px 20px 20px;
            background: white;
            box-shadow:0 0 5px #d9d9d9;
            border-radius: 5px;
        }
    }
</style>
